<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            body,
            html {
                position: relative;

                width: 100%;
                height: 100%;
                margin: 0;
                padding: 0;

                overflow: hidden;
            }
            .main-container {
                position: relative;

                width: 100%;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                background-color: #333333;
            }

            /* 按钮样式 */
            .btn-style {
                position: relative;

                width: 150px;
                height: 40px;
            }
			.btn-style #shape{
				stroke-width: 6px;
				fill: transparent;
				stroke: #009ffd;
				stroke-dasharray: 20 180;
				stroke-dashoffset: -220;
				transition: 1s all ease;
			}
			.btn-style:hover #shape {
				stroke-dasharray: 150 0;
				stroke-width: 4px;
				stroke-dashoffset: 150;
				stroke: #06d6a0;
			}
			.btn-text{
				cursor: pointer;
				position: absolute;
				top: 0;

				width: 100%;
				height: 100%;
				display: flex;
                align-items: center;
                justify-content: center;

				color: #ffffff;
				font-size: 14px;
				letter-spacing: 1px;
			}
        </style>
    </head>
    <body>
        <div class="main-container">
            <div class="btn-style">
                <svg height="40" width="150">
                    <rect id="shape" height="40" width="150" />
                </svg>
				<div class="btn-text">按钮样式</div>
            </div>
        </div>
    </body>
</html>
